<template>
	<view class="content">
		<view class="text-area">
			<cu-custom bgColor="bg-gradual-blue" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="content">查看备忘</block>
			</cu-custom>


			<view v-for="(item, index) in memoList" :key="index" class="box_card">
				<uni-card :is-shadow="true" :title="item.title" @click="detail(item.memoId)"
					@longpress="touchstart(item.memoId)">
					记录日期：<text>{{dateFormat(item.date)}}</text>
					<br />
					<text>点击查看详情</text>
				</uni-card>

			</view>
			<u-loadmore :status="status" :nomore-text="nomoreText" />
			<u-back-top :scroll-top="scrollTop" top="100"></u-back-top>
			<!--弹出层-->
			<view>
				<u-popup :show="show" @close="close" :round="8" mode="center">
					<view style="width: 280px;height: 240px;">
						<u--form :model="loginForm" ref="uLoginForm">
							<u-form-item prop="content">
								<u--textarea v-model="loginForm.content" border="false" height=160></u--textarea>
							</u-form-item>
							<view class="btn_Box">
								<button type="primary" class="submitBtn" size="mini" @click="updateMemo">确定</button>
								<button type="warn" class="resetBtn" size="mini" @click="retun_btn">取消</button>
							</view>
						</u--form>
					</view>
				</u-popup>
			</view>
			<!--引入tabar-->
			<tabbar tabIndex="0"></tabbar>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				memoList: [],
				show: false,
				loginForm: {
					content: "",
				},
				status: 'nomore',
				nomoreText: '——已加载全部——',
				scrollTop: 0

			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReady() {
			this.getList();
			
		},
		computed: {
			userId() {
				return this.$store.getters.getId;
			},
		},
		methods: {
			dateFormat(time) {
				let date = new Date(time);
				let year = date.getFullYear();
				// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				// 拼接
				return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
				// return year + "-" + month + "-" + day;
			},
			touchstart(memoId) {
				let that = this;
				clearInterval(this.Loop); //再次清空定时器，防止重复注册定时器
				this.Loop = setTimeout(function() {
					uni.showModal({
						title: '删除',
						content: '请问要删除本条记录吗？',
						success: (res) => {
							if (res.confirm) {
								uni.request({
									url: this.$api + '/memo/delMemoById',
									data: {
										memoId: memoId,
									},
									method: 'post',
									header: {
										'content-type': 'application/json'
									},
									success: (res) => {
										console.log('删除成功')
										this.getList();
									}
								})
							} else if (res.cancel) {
								console.log('用户点击取消')
							}
						}
					});
				}.bind(this), 1000);
			},
			// touchend() {
			// 	clearInterval(this.Loop);
			// },
			getList() {
				uni.request({
					url: this.$api + '/memo/memoList',
					data: {
						userId: this.userId,
					},
					method: 'post',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						this.memoList = res.data

					}
				})
			},
			detail(memoId) {
				// clearInterval(this.Loop);
				this.show = true
				uni.request({
					url: this.$api + '/memo/selMemoById',
					data: {
						memoId: memoId
					},
					method: 'post',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						this.loginForm.content = res.data[0].content
						this.memoId=memoId
					}
				})
			},
			updateMemo() {
				uni.request({
					url: this.$api + '/memo/updateById',
					data: {
						content: this.loginForm.content,
						memoId: this.memoId
					},
					method: 'post',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						this.getList()
						this.show = false
					}
				})
			},
			retun_btn() {
				this.show = false
			},
			close() {
				this.show = false

			}
		}
	}
</script>

<style>
	page {
		background-color: #FFE4B5;
	}
</style>

<style scoped lang="scss">
	.before_Login {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.box_card {
		font-weight: bold;
	}

	.btn_Box {
		text-align: center;
	}

	.submitBtn,
	.resetBtn {
		width: 80px;
		display: inline-block;
		margin: 5px;
	}
</style>
